<template>
  <div class="edit-container">
    <el-form v-loading="formLoading" ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="理赔状态：" prop="claimsSettlementStatus">
        <el-select v-model="form.claimsSettlementStatus" placeholder="请选择">
          <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="处理人姓名：" prop="processingName">
        <el-input
            style="width: 600px"
            placeholder="请输入名称"
            maxlength="20"
            v-model="form.processingName"></el-input>
      </el-form-item>
      <el-form-item label="理赔时间：" prop="processingTime">
        <el-date-picker
            style="width: 600px"
            v-model="form.processingTime"
            type="datetime"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="相关材料：" prop="fileList">
        <el-upload
            class="upload-demo"
            action="https://report.sbmny.cn/sbbz/file/uploadToLocal"
            :before-upload="beforeUpload"
            :file-format-error="fileFormatError"
            :on-success="handleChange"
            :on-progress="handleProgress"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :file-list="form.fileList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">需上传图片/视频/PDF文件</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input
            style="width: 600px"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="form.remark">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button v-loading="saveLoading" element-loading-background="rgba(0, 0, 0, 0.3)" type="primary"
                   @click="handlerSubmit" v-has-permi="['admin:disaster:claimsSettlement']">保存
        </el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
        :visible.sync="uploads.show"
        title="上传文件"
        :append-to-body="true"
        destroy-on-close
        :close-on-click-modal="false"
        width="1000px">
      <UploadFile
          v-if="uploads.show"
          :multiple="uploads.multiple"
          @getFile="getFile"
          ref="uploads"
      />
    </el-dialog>
  </div>
</template>
<script>
import {detail2, save2} from "@/api/disaster";
import {getForm} from "@/utils/utils";
import UploadFile from "@/components/File/UploadFile.vue";

export default {
  components: {UploadFile},
  props: {
    id: {
      default: null
    },
    status: {
      default: null
    }
  },
  data() {
    return {
      form: {
        reportId: null,
        id: null,
        processingName: '',
        remark: '',
        processingTime: '',
        claimsSettlementStatus: '',
        fileList: [],
      },
      allocationStatus: null,
      rules: {
        processingName: [{required: true, message: '请输入内容', trigger: ['blur']}],
        claimsSettlementStatus: [{required: true, message: '请选择', trigger: ['blur']}],
        remark: [{required: true, message: '请输入内容', trigger: ['blur']}],
        processingTime: [{required: true, message: '请选择时间', trigger: ['blur']}],
        fileList: [{required: true, message: '请上传相关材料', trigger: ['blur']}],
      },
      roles: [],
      saveLoading: false,
      formLoading: false,
      fileList: [],
      uploads: {
        show: false,
        multiple: true,
      },
      statusList: [{id: 1, name: "已理赔"}, {id: 2, name: "未理赔"}]
    }
  },
  mounted() {
    this.form.reportId = this.id
    this.allocationStatus = this.status
    if (this.status !== 0) {
      this.getDetail();
    }
  },
  methods: {
    handleChange(response) {
      // 创建一个新的数组来存储所有文件
      let newFiles = this.form.fileList.slice(); // 使用 slice() 创建一个副本以避免直接修改原始数组
      // 将新的文件添加到新数组中
      newFiles.push(response[0]);
      // 更新表单中的文件列表
      this.form.fileList = newFiles;
    },
    handleRemove(file, fileList) {
      this.form.fileList = fileList
    },
    handleProgress(file, fileList) {
      console.log(file)
      console.log(fileList)
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeUpload(file) {
      const fileType = file.type;
      const allowedTypes = [
        'image/jpeg',
        'image/png',
        'image/gif',          // GIF 图片类型
        'video/mp4',
        'video/avi',
        'video/mpeg',         // MPEG 视频类型
        'video/quicktime',    // QuickTime 视频类型
        'application/pdf',
      ];
      if (!allowedTypes.includes(fileType)) {
        this.$message.error('只能上传图片/视频/PDF，请检查您的上传列表');
        return false; // 取消上传
      }
      return true; // 允许上传
    },
    fileFormatError(file, fileList) {
      this.$message.error('只能上传图片/视频/PDF，请检查您的上传列表');
    },
    getFile(fileList) {
      fileList.filter((item) => {
        if (item.substr(-3, 3) === 'jpg' || item.substr(-3, 3) === 'png') {
          this.form.pic.push(item)
        } else if (item.substr(-3, 3) === 'pdf') {
          this.form.pdf.push(item)
        }
      })
      // this.form.pic = fileList
      this.uploads.show = false
    },
    getDetail() {
      this.formLoading = true
      detail2(this.id).then(res => {
        if (res) {
          getForm(res, this.form);
          this.form = res
        }
      }).finally(() => {
        this.formLoading = false;
      })
    },
    handlerSubmit() {
      if (this.saveLoading || this.formLoading) {
        return;
      }
      this.$refs.form.validate(valid => {
        if (!valid) return;
        this.saveLoading = true;
        save2(this.form).then(() => {
          this.$message.success('保存成功');
          this.close();
        }).finally(() => {
          this.saveLoading = false
        })
      })
    },
    close() {
      this.$emit('hideEditDialog')
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .el-form-item__content {
    display: flex;
  }
}
</style>
